<template lang="pug">
div
  //- Button(@click='add') add
  //- div {{ filter }}
  Form(inline)
    FormItem(style='width: 200px', label1='标题')
      Input(v-model='filter.search', placeholder='请输入标题关键词', :size='formSize')

    FormItem(style='width: 100px', label1='发布状态')
      Select(v-model='filter.status', :size='formSize', clearable, placeholder='发布状态')
        //- Option(value='all') 全部
        Option(value='0') 未发布
        Option(value='1') 已发布
    FormItem(label1='-')
      Button(type='ghost', :size='formSize', @click='search') 筛选

  div(style='margin-bottom: 20px')
    router-link.ivu-btn.ivu-btn-primary(to='/slideshows/add') 新增幻灯片

    ButtonGroup.pull-right
      Button(type='ghost', size='default', @click='bulkOp("publish")' :disabled='operationDisabled') 发布
      Button(type='ghost', size='default', @click='bulkOp("unpublish")' :disabled='operationDisabled') 取消发布
      Button(type='ghost', size='default', @click='bulkOp("delete")' :disabled='operationDisabled') 删除

  Table(:columns='cols', :data='slideshows', :loading='loading' @on-selection-change='rowSelect')

  div.text-center(style='margin-top: 20px')
    Page(:current='page + 1', :total='total', :page-size='pageSize', size='small', show-total, @on-change='viewPage')
</template>

<script>
import { mapState } from 'vuex'
import Api from '@/apis/slideshow'
import store from '@/store'
import SelectCategory from '@/components/SelectCategory'

const pageSize = 9

function getSlideshows (query) {
  let cateId = query.cateId || '0'
  let page = query.page || 0
  page = Math.max(page - 1, 0)

  const { search = '', status = '', type = '' } = query
  const params = {
    gid: store.state.app.id,
    cateId,
    page,
    limit: pageSize,
    search,
    status,
    type
  }
  return Api.getSlideshows(params).then(data => {
    return { data, params }
  })
}

export default {
  beforeRouteEnter (to, from, next) {
    getSlideshows(to.query).then(({ data, params }) => {
      next(vm => {
        vm.page = params.page
        vm.cateId = params.cateId
        vm.total = data.total
        vm.slideshows = data.list
      })
    })
  },
  beforeRouteUpdate (to, from, next) {
    this.loading = true
    getSlideshows(to.query).then(({ data, params }) => {
      this.loading = false
      this.cateId = params.cateId
      this.page = params.page
      this.total = data.total
      this.slideshows = data.list
      next()
    })
  },
  components: {
    SelectCategory
  },
  data () {
    return {
      cols: [
        { align: 'center', type: 'selection', width: 60 },
        {
          title: '封面',
          width: 100,
          align: 'center',
          render: (h, params) => {
            return h('img', {
              class: 'img-responsive',
              style: { margin: '3px' },
              attrs: {
                src: params.row.picture.thumbnail
              }
            })
          }
        },
        {
          title: '标题',
          key: 'title',
          render: (h, params) => {
            return [
              h('div', params.row.title),
              h('div', { style: 'color: #999' }, params.row.link)
            ]
          }
        },
        { title: '更新时间', key: 'changed', width: 100 },
        {
          title: '状态',
          width: 80,
          render: (h, params) => {
            return params.row.published ? '已发布' : '未发布'
          }
        },
        {
          title: '操作',
          key: 'action',
          width: 150,
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('router-link', {
                props: {
                  to: `/slideshow/${params.row.id}/edit`
                },
                class: ['ivu-btn', 'ivu-btn-small', 'ivu-btn-primary'],
                style: {
                  marginRight: '5px'
                }
              }, '编辑'),
              h('Button', {
                props: {
                  type: 'error',
                  size: 'small'
                },
                on: {
                  click: () => {
                    this.remove(params.index)
                  }
                }
              }, '删除')
            ])
          }
        }
      ],
      formSize: 'default',
      loading: false,
      page: 0,
      total: 0,
      pageSize,
      slideshows: [],
      filter: {
        search: '',
        status: '',
        type: ''
      },
      cateId: '',
      selection: []
    }
  },
  computed: {
    operationDisabled () {
      return this.selection.length === 0
    },
    filterArray () {
      const filters = []
      for (let key in this.filter) {
        if (this.filter[key]) {
          filters.push(`${key}`)
        }
      }
    },
    ...mapState({
      appId: state => state.app.id
    })
  },
  methods: {
    viewPage (page) {
      this.$router.push({
        path: '',
        query: { page, cateId: this.cateId, ...this.filter }
      })
    },
    viewCategory (category) {
      this.cateId = category.value
    },
    search () {
      this.$router.push({
        path: '',
        query: { cateId: this.cateId, ...this.filter }
      })
    },
    remove (idx) {
      this.$Modal.confirm({
        title: '删除确认',
        content: `删除 < ${this.slideshows[idx].title} > 吗？`,
        loading: true,
        onOk: () => {
          const id = this.slideshows[idx].id
          Api.deleteSlideshow(id).then(() => {
            this.$Message.success('删除成功')
            this.slideshows.splice(idx, 1)
            this.$Modal.remove()
          })
        }
      })
    },
    rowSelect (selection) {
      this.selection = selection
    },
    bulkOp (op) {
      const ids = this.selection.map(item => item.id)
      console.log('bulk operation', op, ids)
    }
  }
}
</script>

<style lang="less" scoped>
.article {
  // margin: 0 8px;
  position: relative;
  border: 1px solid #eee;
  overflow: hidden;
  margin-bottom: 16px;

  &-title {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 3px 8px;
    color: #fff;
    background-color: rgba(0, 0, 0, .5);
    font-size: 14px;
  }

  &-cover, &-empty-cover {
    width: 275px;
    height: 183px;
    background-color: #eee;
  }

  &-empty-cover {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    // height: 66%;
  }

  &-actions {
    // padding: 8px;
    text-align: center;

    a {
      display: inline-block;
      padding: 8px;
      width: 50%;
      color: #777;

      &:hover {
        color: #333;
      }

      & + a {
        border-left: 1px solid #eee;
      }
    }

    // border: 1px solid #ccc;
    // border-top: none;
  }
}
</style>
